<template>
  <div v-show="visible" class="filter">
    <div class="text-right top-close" @click="handleClose">
      <vanIcon name="cross" />
    </div>
    <section class="search">
      <i class="icon icon-search"></i>
      <input
        type="text"
        class="input-search"
        v-model="keywords"
        placeholder="输入公司/职位关键字"
        @keyup.enter="onEnter"
      />
    </section>
    <section
      class="filter-item"
      v-for="filterItem in filterList"
      :key="filterItem.title"
    >
      <p class="filter-title">{{ filterItem.title }}</p>
      <div class="filter-list">
        <div
          :class="['tag', { active: item.value == filterObj[filterItem.prop] }]"
          v-for="item in filterItem.list"
          :key="item.value"
          @click="filterObj[filterItem.prop] = item.value"
        >
          {{ item.label }}
        </div>
      </div>
    </section>
    <section>
      <div class="el-select" @click="showPicker('classid')">
        <span>{{ filterObj.classidName || "行业筛选" }}</span>
        <i class="icon icon-arrow"></i>
      </div>
      <div class="el-select" @click="showPicker('regionid')">
        <span>{{ filterObj.regionidName || "地区筛选" }}</span>
        <i class="icon icon-arrow"></i>
      </div>
    </section>
    <section class="action">
      <button class="btn btn-reset" @click="onResetClick">重置</button>
      <button class="btn btn-search" @click="onSearchClick">搜索</button>
    </section>

    <vanPopup v-model:show="pickerVisible" round position="bottom">
      <vanPicker
        :columns="columns"
        @cancel="pickerVisible = false"
        @confirm="onPickerConfirm"
      />
    </vanPopup>
  </div>
</template>
<script setup>
import {
  workingYears,
  salaryList,
  eduList,
  yuangongList,
  xzList,
  tradeList,
  regionList,
  areaMap,
} from "@/utils/filterData";
import { ref, watch } from "vue";
import { Icon as vanIcon, Popup as vanPopup, Picker as vanPicker } from "vant";
// defineEmits,defineProps无需导入，直接使用
// 声明需要触发的事件，返回一个emit函数，作用和this.$emit函数的作用是一致的
const emits = defineEmits(["search", "close"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.visible,
  // props.visible,
  (newV, oldV) => {
    if (newV) {
      document.body.style.position = "fixed";
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.position = "static";
      document.body.style.overflow = "scroll";
    }
  },
  { immediate: true }
);

const columns = ref([]);
const selectType = ref("");
const pickerVisible = ref(false);
const filterObj = ref({
  gznum: "",
  salary: "",
  edu: "",
  yuangong: "",
  cxz: "",
  classid: "",
  classidName: "",
  regionid: "",
  regionidName: "",
  area: "",
});
// 显示选择器
const showPicker = (type) => {
  selectType.value = type;
  if (selectType.value == "classid") {
    columns.value = tradeList.map((item) => {
      return item.label;
    });
  } else if (selectType.value == "regionid") {
    columns.value = regionList.map((item) => {
      return item.label;
    });
  }
  pickerVisible.value = true;
};
// 选择后赋值
const onPickerConfirm = (value, index) => {
  if (selectType.value == "classid") {
    filterObj.value.classid = tradeList[index].value;
    filterObj.value.classidName = value;
  } else if (selectType.value == "regionid") {
    filterObj.value.regionid = regionList[index].value;
    filterObj.value.regionidName = value;
  }
  pickerVisible.value = false;
};

const keywords = ref("");
const onSearchClick = () => {
  if (!keywords) return false;
  filterObj.value.area = areaMap[filterObj.value.regionid] || "";
  let params = {
    keywords: keywords.value,
    ...filterObj.value,
  };
  emits("search", params);
  emits("close");
};
const onResetClick = () => {
  keywords.value = "";
  for (let key in filterObj.value) {
    filterObj.value[key] = "";
  }
};

const handleClose = () => {
  emits("close");
};

const onEnter = (event) => {
  onSearchClick();
};

const filterList = ref([
  {
    prop: "gznum",
    title: "工作年限",
    list: workingYears,
  },
  {
    prop: "salary",
    title: "薪资范围",
    list: salaryList,
  },
  {
    prop: "edu",
    title: "学历要求",
    list: eduList,
  },
  {
    prop: "yuangong",
    title: "公司规模",
    list: yuangongList,
  },
  {
    prop: "cxz",
    title: "公司性质",
    list: xzList,
  },
]);
</script>

<style lang="scss" scoped>
.filter {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  padding: 16px;
  background: #fff;
  overflow: auto;
  margin-bottom: 60px;
}
.top-close {
  height: 30px;
  margin-top: -10px;
  .van-icon {
    color: $baseColor;
  }
}
.search {
  background-color: #fdf6f6;
  margin-bottom: 14px;
  padding: 0 16px;
  border-radius: 4px;
  .input-search {
    width: 200px;
    margin-left: 4px;
    line-height: 32px;
    font-size: 12px;
    background-color: transparent;
  }
}
.tag {
  display: inline-block;
  margin: 4px;
  padding: 4px 9px;
  font-size: 12px;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  &.active {
    color: $baseColor;
    border-color: $baseColor;
  }
}
.filter-item {
  margin-bottom: 16px;
  .filter-title {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
}
.select-trade,
.select-region {
  margin-bottom: 16px;
  padding: 0 10px;
  width: 343px;
  font-size: 12px;
  height: 32px;
  color: rgba(153, 153, 153, 1);
  background-color: #fdf6f6;
  border: none;
  border-radius: 4px;
}

.el-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px;
  font-size: 12px;
  background-color: #fdf6f6;

  .icon {
    transform: rotate(90deg);
  }
}
.action {
  display: flex;
  justify-content: space-between;

  .btn {
    width: 155px;
    line-height: 40px;
  }
  .btn-search {
    color: #fff;
    background-color: $baseColor;
  }
  .btn-reset {
    color: #fff;
    background-color: #d3d3d3;
  }
}
</style>